<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.可以使用本地的资源-->
    <!--<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">-->

    <!--2.使用在线的资源-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-row {
            margin-bottom: 20px;
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>

 <div id="app">
     <!--指定一行-->
    <!-- <el-row>
         &lt;!&ndash;普通按钮&ndash;&gt;
         <el-button>按钮</el-button>
         &lt;!&ndash;type控制按钮颜色&ndash;&gt;
         <el-button type="primary" plain>主要按钮</el-button>
         <el-button type="success" round>成功按钮</el-button>
         <el-button type="info">信息按钮</el-button>
         <el-button type="warning">警告按钮</el-button>
         <el-button type="danger">危险按钮</el-button>
         <el-button type="danger" icon="el-icon-user-solid">用户</el-button>
         <el-button type="danger" icon="el-icon-delete" circle></el-button>
     </el-row>
     <hr>
     &lt;!&ndash;layout布局&ndash;&gt;
     <el-row>
         <el-col :span="20"><div class="grid-content bg-purple-dark"></div></el-col>
     </el-row>

     <el-row>
         <el-col :span="10"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="10"><div class="grid-content bg-purple-light"></div></el-col>
     </el-row>
     <el-row>
         <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
     </el-row>
     <el-row>
         <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
     </el-row>
     <el-row :gutter="10">
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
     </el-row>

     <el-row :gutter="20">
         <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="6" :offset="10"><div class="grid-content bg-purple"></div></el-col>
     </el-row>

     <hr>
     <el-row type="flex" class="row-bg" justify="space-around">
         <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
     </el-row>

     <hr>-->
     <el-container style="height: 500px; border: 1px solid #eee">
         <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
             <el-menu>
                 <el-submenu index="1">
                     <template slot="title">
                         <i class="el-icon-star-on"></i>员工管理</template>
                         <el-menu-item index="1-1">菜单</el-menu-item>
                         <el-menu-item index="1-2">工资</el-menu-item>
                     </el-submenu>
                 <el-submenu index="2">
                     <template slot="title">
                         <i class="el-icon-user"></i>部门管理</template>
                         <el-menu-item index="1-1">选项1</el-menu-item>
                         <el-menu-item index="1-2">选项2</el-menu-item>
                     </el-submenu>
             </el-menu>
         </el-aside>

         <el-container>
             <el-header style="text-align: right; font-size: 12px">
                 <el-dropdown>
                     <i class="el-icon-setting" style="margin-right: 15px"></i>
                     <el-dropdown-menu slot="dropdown">
                         <el-dropdown-item>查看</el-dropdown-item>
                         <el-dropdown-item>新增</el-dropdown-item>
                         <el-dropdown-item>删除</el-dropdown-item>
                     </el-dropdown-menu>
                 </el-dropdown>
                 <span>王小虎</span>
             </el-header>

             <el-main>
                 <el-table :data="tableData">
                     <el-table-column prop="name" label="日期" width="140">
                     </el-table-column>
                     <el-table-column prop="name" label="名字" width="120">
                     </el-table-column>
                     <el-table-column prop="address" label="地址">
                     </el-table-column>
                 </el-table>
             </el-main>
         </el-container>
     </el-container>


 </div>

</body>
</html>
<!--引入vue.js-->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!--引入element-ui.js-->
<!--<script src="element-ui/lib/index.js"></script>--><!--本地-->
<!--在线-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    new Vue({
        el:'#app',
        data(){
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item)
            }
        }

    });

</script>



